<script setup>
import axios from "axios";
import webConfig from "@/GlobalParas.js";
import {ref} from "vue";


let props = defineProps({
  selectedQuantifyItem: {
    type: Object,
    default: {
      tableKey: {
        type: String,
        default: ""
      },
      parentId: {
        type: String,
        default: ""
      },
      quantifyRule: {
        type: String,
        default: ""
      },
      marks: {
        type: Number,
        default: 0
      },
      sort: {
        type: Number,
        default: 0
      }
    }
  }
})

// console.log(props.selectedQuantifyItem.parentId)

let allDictItem = ref([]);
let quantifyClass = ref([]);
let activeKey = ref(props.selectedQuantifyItem.parentId);
let selectedItem = ref(props.selectedQuantifyItem.tableKey);

// console.log(props.selectedQuantifyItem.parentId);


let url = webConfig.postUrl + "/dictQuantify/getAllDictQuantify";
axios.post(url, null).then(res => {
  allDictItem = res.data;
  // console.log(activeKey)
  quantifyClass = allDictItem.filter(item => {
    // console.log(item.parentId)
    return item.parentId === null
  })

  quantifyClass.forEach(item => {
    item.subItems = allDictItem.filter(dictItem => {
      return dictItem.parentId === item.tableKey;
    })
  })

  activeKey.value = "";
  activeKey.value = props.selectedQuantifyItem.parentId
})

let emit = defineEmits(['getSelectedInfo',"update:selectedQuantifyItem"]);

function getSelectedItemInfo() {
  let selectedItemInfo = allDictItem.filter(item => {
    return item.tableKey === selectedItem.value;
  })

  emit('getSelectedInfo', selectedItemInfo[0])
  emit("update:selectedQuantifyItem",selectedItemInfo[0])
  // console.log(selectedItemInfo[0]);
}
</script>

<template>
  <div style="background: #FFFFFF;overflow-y:auto">
    <a-radio-group
        v-model:value="selectedItem"
        style="width:100%"
        @change="getSelectedItemInfo">
      <a-tabs
          v-model:activeKey="activeKey"
          tab-position="left">
        <a-tab-pane v-for="item in quantifyClass" style="padding-top: 10px;padding-left: 10px"
                    :key="item.tableKey"
                    :tab="item.quantifyRule">
          <div style="height:450px;overflow-y: auto">
            <table class="tblClass">
              <tbody>
              <tr>
                <th style="width:50px">选中</th>
                <th>绩效明细</th>
                <th style="width:50px">计分</th>
              </tr>

              <tr v-for="subItem in item.subItems">
                <td>
                  <a-radio :value="subItem.tableKey"></a-radio>
                </td>
                <td style="text-align: left;padding-left: 5px">
                  {{ subItem.quantifyRule }}
                </td>
                <td>
                  {{ subItem.marks }}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-radio-group>
  </div>
</template>

<style scoped>
.tblClass {
  width: calc(100% - 10px);
  border: 1px solid #5e9fff;
  border-collapse: collapse;
}

.tblClass th, td {
  background: #ddeaff;
  height: 40px;
  border: 1px solid #5e9fff;
  text-align: center;
}

.tblClass td {
  background: #ffffff;
  font-size: 12pt;
  font-family: "宋体", "Times New Roman", Times, serif;
}
</style>